import { useState } from "react";
/**
 * 自定义Hook函数
 * 【说明】：自定义Hook函数就是以use开头的函数，通过自定义的Hook函数可以使用逻辑的封装和复用
 * 【步骤】：1、声明一个use开头的Hook函数
 *          2、在函数体内封装可复用的代码，（只要是可复用的皆可放入）
 *          3、将组件中用到的状态和回调返回出去（以对象或者数组的形式都可以）
 *          4、当那个组件要用到这个逻辑，就执行这个函数即可，使用结构处理的状态和回调
 * 【使用规则】：
 *          1、自定义的Hook组件只能在组件内部，或者其他自定义Hook组件中使用
 *          2、自定义的Hook函数只能在组件的顶部使用，不能在 if for中使用
 */

function CustomizeHook() {
  let { show, setShow, text, setTest } = useShow();
  //   let [show, setShow] = useState(true);
  //   let [text, setTest] = useState("显示");
  
  let change = () => {
    setShow(!show);
    show ? setTest("隐藏") : setTest("显示");
  };

  return (
    <div>
      <div hidden={show}>我是div</div>
      <button onClick={change}>{text}</button>
    </div>
  );
}

// 通过以上代码，我们定义了函数，可以进行显示隐藏div，但是当前组件是耦合在一起，不便于复用
// 通过自定义Hook函数，使用组件显示隐藏
function useShow() {
  let [show, setShow] = useState(true);
  let [text, setTest] = useState("显示");
  return { show, setShow, text, setTest };
}

export default CustomizeHook;
